<template>
<div class="collectionBackBox">
  <h2>
    我的收藏夹
  </h2>
  <div class="Box" v-if="collectionListData.length">
    <div v-for="item in collectionListData" class="goodsItem">
      <GoodsItem :good="item">
      </GoodsItem>
    </div>
    <div style="width: 600px;height: 200px" v-if="collectionListData.length%2===1" class="goodsItem">
    </div>
  </div>
  <template v-else>
    <el-empty description="无数据" />
  </template>
</div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import {useUserStore} from "@/stores/userStore";
import {getCollectionByUserIdAPI} from '@/apis/collection'
import {ElMessage} from "element-plus";
import GoodsItem from '@/views/Layout/components/GoodsItem.vue'

const collectionListData=ref([])
const userStore=useUserStore()
const pageData=ref({
   current:1
})

const getCollections=async ()=>{
  const res=await getCollectionByUserIdAPI(userStore.user.id,pageData.value.current);

  if(res.data.code===1)
  {
    console.log(res.data.data)
    pageData.value=res.data.data
    collectionListData.value=res.data.map.list
  }
  else
  {
    ElMessage.error(res.data.msg)
  }
}

onMounted(()=>{
  getCollections()
})
</script>

<style scoped>
.collectionBackBox h2
{
  height: 70px;
  line-height: 70px;
  margin-left: 50px;
}

.Box
{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.goodsItem
{

}
</style>